<template>
  <div id="back">
    <div id="header">
      <div id="title">
        <p style="test-align:left;font-size:20px;margin-top: auto">**养老院</p>
      </div>
      <div id="contain-url">

      <router-link :to="{path:'/Info',query:{obj:$route.query.obj}}">
<!--        <router-link to="/Info">-->
          <span style="text-align:center;font-size: 20px; color:black;">{{object.name}},您好~</span>
        </router-link>
      </div>
    </div>

    <div class="container">
      <br>
<!--      <p style="font-size:17px;color:white;text-align:left;">●护工评价</p>-->
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           @click="toClock">
        <img src="@/assets/打卡.png" style="width: 80%"/>
        <p>打卡</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
          @click="toLeave">
        <img src="@/assets/请假.png" style="width: 80%"/>
        <p>请假</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           @click="toMyassess">
        <img src="@/assets/评价我的.png" style="width: 80%"/>
        <p>评价我的</p>
      </div>

      <br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

  </div>


</template>

<script>
export default {
  data(){
    return{
      object : JSON.parse(this.$route.query.obj)
    }
  },
  methods:{
    toClock(){
      // let re = JSON.stringify(this.object)
      this.$router.push({path:'/components/Nurse/Clock',query:{obj:this.$route.query.obj}});
    },
    toLeave(){
      this.$router.push({path:'/components/Nurse/Leave',query:{obj:this.$route.query.obj}});
    },
    toMyassess(){
      this.$router.push({path:'/components/Nurse/Myassess',query:{obj:this.$route.query.obj}});
    }
  }
}

</script>

<style scoped>
.icon{
  background: white;
  width: 6%;
  height: auto;
  margin-left: 40px;
  float: left;
  background: rgba(0, 0, 0, 0);
  color:white;
  font-size: 14px;
}
.icon_selected{
  background: white;
  width: 6%;
  height: auto;
  margin-left: 40px;
  float: left;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  color:white;
}
#header{
  width: 100%;
  height: 30px;
  background: #4bcafa
;
}
#title{
  background:#4bcafa;
  width:200px;
  height: 30px;
  float: left;
}
#contain-url{
  width: 200px;
  height: 30px;
  background: #4bcafa;
  margin-left: 80%;
}
.container{
  width: 80%;
  height: auto;
  background: white;
  margin-left: 10%;
  margin-top: 30px;
  /*opacity: 0.3;*/
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height:80%;
}

#back{
  background:url("http://cdn-dlut.supwisdom.com/student/static/common-home/img/theme1.jpg");
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: fixed;
  top: 0px; /*这里是设置与顶部的距离*/
  left: 0px; /*这里是设置与左边的距离*/
  bottom: 0px;
  right: 0px;

}


</style>